<template>
  <li>
    <div class="face">
      <img
        :src="`${product.resource.cover}?x-oss-process=image/resize,m_mfit,h_405,w_720`"
      />
      <div class="duration">
        <span>{{ getPlayTime(product.resource.duration) }}'</span>
        <span>{{ getPlaySecond(product.resource.duration) }}"</span>
      </div>
    </div>
    <div class="product-title">
      <h5>{{ product.resource.title }}</h5>
      <span>{{ formatDate(product.resource.author.userinfo.addtime) }}</span>
      <div class="count-title">
        <p>
          <span>{{ getPlay(product.resource.count.count_like) }}</span>
          <span>.</span>
          <span>{{ getPlayView(product.resource.count.count_view) }}</span>
        </p>
        <i class="iconfont icon-diandian"></i>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: ["product"],
  methods: {
    getPlay: function (value) {
      if (value > 10000) {
        return (value / 10000).toFixed(2) + "w喜欢";
      } else {
        return value+"喜欢";
      }
      
    },
       getPlayView: function (value) {
      if (value > 10000) {
        return (value / 10000).toFixed(2) + "w观看";
      } else {
        return value+"观看";
      }
      
    },
    getPlayTime: function (times) {
        if(times / 60<10){
            return "0"+ parseInt(times / 60)
        }else{
            return parseInt(times/60)
        }
      
    },
    getPlaySecond: function (times) {
        if(times % 60<10){
            return "0"+ parseInt(times % 60);
        }else{
            return  parseInt(times % 60);
        }
     
    },
    formatDate(addTime) {
      var year = new Date(addTime * 1000).getFullYear();
      var month = new Date(addTime * 1000).getMonth() + 1;
      var date = new Date(addTime * 1000).getDate();
      // if (month > 9) {
      //   return 0 + month;
      // }
      // if (date > 9) {
      //   return 0 + date;
      // }
      //  var hour=new Date(addTime*1000).getHours();
      //  var minute=new Date(addTime*1000).getMinutes();
      //  var second=new Date(addTime*1000).getSeconds();
      return year + "-" + month + "-" + date;
    },
  },
};
</script>

<style lang="less" scoped>
li {
  margin: 10px;
  display: flex;
  .face {
    width: 50%;
    position: relative;
    img {
      width: 100%;
      border-radius: 10px;
    }
    .duration {
      position: absolute;
      right: 4px;
      bottom: 4px;
      color: white;
      font-size: 14px;
    }
  }
  .product-title {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    h5 {
        width: 100%;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin: 5px 0;
    }
    span{
        color: #999;
        font-size: 14px;
        width: 100%;
    }
    .count-title{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      
        p{
            margin: 4px 0;
           
            span{
                color: #555;
                font-size: 12px;
                margin-right: 2px;
            }
        }
        i{
            color: #999;
        }
    }
  }
}
</style>